import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import {useEffect, useState} from "react";
import locale from "antd/es/date-picker/locale/zh_CN";
import {Button, Image, Form, Modal, Row, message, DatePicker} from "antd";
import useBoolean from "@/hooks/useBoolean";
import DndTable from "@/components/common/table/dndTable";
import UploadFile from "@/components/common/form/uploadFile";
import {columnsIndex, columnsSetting} from "@/components/Columns";
import {ApiPrmoCreateOrEditInfo, ApiPrmoDel, ApiPrmoFind} from "@/api";
import {CustomFormItem, InputFormItem} from "@/components/common/form/formItem";

export default function Meituan() {
    const [form] = Form.useForm();
    const [visibly, on, off] = useBoolean(false);
    const [row, setRow] = useState<any>("");
    const [imgUrl, setImgUrl] = useState("");
    const [qcodeUrl, setQcodeUrl] = useState("");
    const [data, setData] = useState([]);

    const columns = [
        {
            ...columnsIndex,
            title: "活动",
            width: 100,
        },
        {
            title: "品牌",
            dataIndex: "spare1",
            key: "spare1",
            width: 100,
        },
        {
            title: "标题",
            dataIndex: "spare2",
            key: "spare2",
            width: 200,
        },
        {
            title: "描述",
            dataIndex: "spare3",
            key: "spare3",
            width: 200,
        },
        {
            title: "原价",
            dataIndex: "beforeAmt",
            key: "beforeAmt",
            width: 60,
        },
        {
            title: "现价",
            dataIndex: "afterAmt",
            key: "afterAmt",
            width: 60,
        },
        {
            title: "开始时间",
            dataIndex: "beginTime",
            key: "beginTime",
        },
        {
            title: "结束时间",
            dataIndex: "endTime",
            key: "endTime",
        },
        {
            title: "商品图片",
            dataIndex: "imgUrl",
            key: "imgUrl",
            render: (src: any) => <Image width={50} src={src} />,
        },
        {
            title: "活动码",
            dataIndex: "qcodeUrl",
            key: "qcodeUrl",
            render: (src: any) => <Image width={50} src={src} />,
        },
        {
            ...columnsSetting,
            fixed: "right",
            render: (_: any, row: any) => (
                <div>
                    <Button type="primary" size="small" onClick={() => handleEdit(row)}>
                        编辑
                    </Button>

                    <Button danger onClick={() => handleDel(row)} style={{marginLeft: 20}} size="small">
                        删除
                    </Button>
                </div>
            ),
        },
    ];

    const handleEdit = (row: any) => {
        setRow(row);
        setImgUrl(row.imgUrl);
        setQcodeUrl(row.qcodeUrl);
        row.beginTime = dayjs(row.beginTime);
        row.endTime = dayjs(row.endTime);
        console.log(row);
        on();
        form.setFieldsValue(row);
    };

    const handleDel = (row: any) => {
        Modal.warning({
            title: "是否删除",
            okText: "确定",
            onOk: () => {
                ApiPrmoDel(row.pkId)
                    .then(() => {
                        message.success("删除成功");
                        reqFindList();
                    })
                    .catch(err => {
                        console.log(err);
                        message.success("删除失败");
                    });
            },
        });
    };

    const handleOk = async () => {
        try {
            const val = await form.validateFields();

            if (qcodeUrl && imgUrl) {
                val.beginTime = val.beginTime.valueOf();
                val.endTime = val.endTime.valueOf();
                val.imgUrl = imgUrl;
                val.qcodeUrl = qcodeUrl;
                val.type = 0;
                if (row) {
                    val.pkId = row.pkId;
                }
                const res = await ApiPrmoCreateOrEditInfo([val]);
                setImgUrl("");
                setQcodeUrl("");
                if (res) {
                    reqFindList(onCancel);
                }
            } else {
                message.error("请上传图片");
            }
        } catch (error) {
            console.log(error);
        }
    };

    const onCancel = () => {
        setRow("");
        off();
    };

    //查找列表
    const reqFindList = (callBack?: any) => {
        ApiPrmoFind()
            .then((res: any) => {
                setData(res.data);
                callBack && callBack();
            })
            .catch((err: any) => {
                message.error(err);
            });
    };

    useEffect(() => {
        reqFindList();
    }, []);

    return (
        <>
            <Row>
                <Button type="primary" onClick={on}>
                    添加Tabs
                </Button>
                &nbsp;&nbsp;
                <Button
                    type="primary"
                    onClick={() => {
                        ApiPrmoCreateOrEditInfo(data);
                        message.success("保存成功");
                    }}
                >
                    保存排序
                </Button>
            </Row>
            <DndTable style={{marginTop: 20}} scroll={{x: 1500}} setData={setData} data={data} columns={columns} />
            <Modal
                destroyOnClose
                width={600}
                title={row ? "编辑轮播" : "添加轮播"}
                open={visibly}
                onOk={handleOk}
                onCancel={onCancel}
            >
                <Form form={form} labelAlign="left" labelCol={{span: 5}} preserve={false}>
                    <InputFormItem width={300} name="spare1" label="品牌" />
                    <InputFormItem width={300} name="spare2" label="标题" required />

                    <InputFormItem width={300} name="spare3" label="描述" initialValue="请在有效期内使用哦" required />
                    <InputFormItem
                        tooltip="没价格就写0"
                        width={300}
                        name="beforeAmt"
                        label="原价"
                        required
                        type="number"
                    />
                    <InputFormItem
                        tooltip="没价格就写0"
                        width={300}
                        name="afterAmt"
                        label="折扣价"
                        required
                        type="number"
                    />
                    <CustomFormItem name="beginTime" label="开始时间" required>
                        <DatePicker format="YYYY-MM-DD" style={{width: 300}} locale={locale} />
                    </CustomFormItem>
                    <CustomFormItem name="endTime" label="结束时间" required>
                        <DatePicker format="YYYY-MM-DD" style={{width: 300}} locale={locale} />
                    </CustomFormItem>

                    <CustomFormItem name="imgUrl" shouldUpdate label="商品图片" tooltip="图片长宽高 1:1">
                        {imgUrl ? (
                            <>
                                <Image
                                    src={imgUrl}
                                    alt="avatar"
                                    style={{
                                        width: "100%",
                                        maxWidth: 300,
                                    }}
                                />
                                <div>
                                    <Button style={{marginTop: 10}} onClick={() => setImgUrl("")} danger>
                                        删除图片
                                    </Button>
                                </div>
                            </>
                        ) : (
                            <UploadFile setImg={setImgUrl} />
                        )}
                    </CustomFormItem>
                    <CustomFormItem name="qcodeUrl" label="活动码" tooltip="扫码可进美团活动页面">
                        {qcodeUrl ? (
                            <>
                                <Image
                                    src={qcodeUrl}
                                    alt="avatar"
                                    style={{
                                        width: "100%",
                                        maxWidth: 300,
                                    }}
                                />
                                <div>
                                    <Button style={{marginTop: 10}} onClick={() => setQcodeUrl("")} danger>
                                        删除图片
                                    </Button>
                                </div>
                            </>
                        ) : (
                            <UploadFile setImg={setQcodeUrl} />
                        )}
                    </CustomFormItem>
                </Form>
            </Modal>
        </>
    );
}
